<template>
  <div id="map">
    <div class="swiper-container" :style="swiperBoxCss">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(v, k) in mapData" :key="k + 'swiper'">
          <div>
            <img class="swiperImg" :src="v.imgUrl" alt="" />
          </div>
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>
<script>
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
import axios from "axios";
export default {
  name: "Map",
  props: {
    swiperBoxCss: {
      default: "",
    },
    data: {
      default: "",
    },
  },
  data() {
    return {
      mapData: [],
    };
  },
  methods: {
    getInfo() {
      if (typeof this.$props.data == "string") {
        axios.get("api/small/commodity/v1/bannerShow").then((res) => {
          console.log(res.data.result);
          res.data.result.forEach((v, k) => {
            var obj = {};
            obj.imgUrl = v.imageUrl;
            this.$set(this.mapData, k, obj);
          });
          console.log(this.mapData);
          console.log("swiper初始化");
        });
      } else {
        this.mapData = this.$props.data;
      }
    },
  },
  mounted() {
    this.getInfo();
    setTimeout(() => {
      new Swiper(".swiper-container", {
        pagination: ".swiper-pagination",
        paginationClickable: true,
      });
    }, 200);
  },
};
</script>
<style>
.swiper-container {
  width: 100%;
  height: 3rem;
}
.swiper-slide div {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper-slide div img {
  /* width: auto;
  height: 2.6rem; */
  width: 100%;
  height: 100%;
}
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 10px;
  left: 0;
  width: 100%;
  margin: 5px 0;
}
.swiper-pagination-bullet-active {
  background: #e53e42;
}
</style>
